import React, { Component } from 'react';
import './Myrequest.scss'

import img from '../imgs/login_01.gif'
import {user_register} from '../utils/api'

class Myrequest extends Component {
    constructor(props){
        super(props);
        this.state = {
            phone:"",
            pass:'',
            passwor:'',
        }
        
    }
    onchange=(e)=>{
        this.setState({
            [e.target.name]:((e.target.type == "checkbox" || e.target.type == 'radio')? e.target.checked:e.target.value)
        },()=>{
            console.log(this.state);         
        })
    }

    handelclock(){
        if(/^1[3-9]\d{9}$/.test( this.state.phone ) == false ){
            alert('请输入合法的手机号');
        }else if(!this.state.pass || !this.state.passwor){
            alert('请输入密码/确认密码')
        }else if(this.state.pass !== this.state.passwor){
            alert('密码和确认密码不一致');
        }else{
            var newSata = JSON.parse( JSON.stringify( this.state ) );
            delete newSata.passwor;

            user_register(newSata).then((res)=>{
                console.log(res.data);
                if(res.data.code == 200){
                    alert('注册成功！')
                }else{
                    alert(res.data.msg)
                }
            })
        }
    }
    
    render() {
        return (
            <div className="inputbox">
                <div className="tubiao">
                    <img src= {img} alt=""/>
                </div>
                    <div className="mar">
                        <div className="inpu">
                        <input type="text" name="phone" placeholder="请输入用户名" defaultValue={this.state.phone} onChange={this.onchange}/> 
                        </div>
                        <div className="inpu">
                        <input type="password" name="pass" placeholder="请输入密码" defaultValue={this.state.pass} onChange={this.onchange}/> 
                        </div>     
                        <div className="inpu">
                        <input type="password" name="passwor" placeholder="请二次输入密码" defaultValue={this.state.passwor} onChange={this.onchange}/> 
                        </div>     
                        <div className="inpu">
                        <input type="button" value="登录" className="btn" /> 
                        </div>       
                        <div className="inpu">
                        <input type="button" value="注册" onClick={()=>{
                            this.handelclock()
                        }}/> 
                        </div> 
                </div>    
            </div>
        );
    }
}

export default Myrequest;